<div v-cloak id="app" class="main-content">
    <div class="form-body">
        <one-form
            :config="config"
            v-model="fdata"
            ref="ruleForm"
            v-on:input="changeEvent"
        >
            <div slot="menuLeft">
                <el-button
                    class="button-item"
                    :loading="btnLoading"
                    type="primary"
                    @click="store('ruleForm')"
                    size="small"
                >
                    保存
                </el-button>
                <el-button size="small" @click="backpage()">返回</el-button>
            </div>
            <!-- 上传图片 -->
            <template slot="icon" slot-scope="scope">
                <one-img-cell
                    v-model="fdata[scope.row.prop]"
                    :img-cell-item-style="{width:'100px',height: '100px',}"
                    :max="1"
                ></one-img-cell>
            </template>
            <!-- 上传图片 -->
            <template slot="active_icon" slot-scope="scope">
                <one-img-cell
                    v-model="fdata[scope.row.prop]"
                    :img-cell-item-style="{width:'100px',height: '100px',}"
                    :max="1"
                ></one-img-cell>
            </template>
        </one-form>
    </div>
</div>
{include file='common@components/one-form'} {include
file='common@components/one-img-cell'}
<script>
    const _formData = JSON.parse('{:json_encode((array)$formData, 1)}');
    const _type = JSON.parse('{:json_encode((array)$type, 1)}');
    const app = new Vue({
        el: '#app',
        data() {
            const urlPreg =
                /^\/[^\u4e00-\u9fa5]{0,}\/[^\u4e00-\u9fa5]{0,}\/[^\u4e00-\u9fa5]{0,}/;
            const jumpUrlValidator = (rule, value, callback) => {
                if (this.fdata.jump_type == 1 && !urlPreg.test(value)) {
                    callback(
                        new Error(
                            '跳转地址格式错误，示例：/pages/index/index?id=1&name=name'
                        )
                    );
                } else {
                    callback();
                }
            };
            const appidValidator = (rule, value, callback) => {
                let appidPreg = /^wx[A-Za-z0-9]+$/;
                if (this.fdata.jump_type == 2 && !appidPreg.test(value)) {
                    callback(
                        new Error(
                            '跳转到其他小程序必须填写小程序appid，小程序appid格式为：wx*********'
                        )
                    );
                } else {
                    callback();
                }
            };
            const mpPageValidator = (rule, value, callback) => {
                if (this.fdata.jump_type == 2 && !urlPreg.test(value)) {
                    callback(
                        new Error(
                            '跳转地址格式错误，示例：/pages/index/index?id=1&name=name'
                        )
                    );
                } else {
                    callback();
                }
            };
            return {
                uploading: false,
                loading: false,
                btnLoading: false,
                config: {
                    formdesc: [
                        {
                            label: '导航类型 :',
                            prop: 'tid',
                            type: 'select',
                            rules: [
                                { required: true, message: '请选择导航类型' },
                            ],
                            options: _type,
                        },
                        {
                            label: '导航名称 :',
                            prop: 'nav_name',
                            type: 'input',
                            rules: [
                                { required: true, message: '导航名称不能为空' },
                            ],
                            bind: {
                                placeholder: '请输入导航名称',
                            },
                        },
                        {
                            label: '导航别名 :',
                            prop: 'nav_alias',
                            type: 'input',
                            rules: [
                                { required: true, message: '导航别名不能为空' },
                            ],
                            bind: {
                                placeholder: '请输入导航别名',
                            },
                            content: '默认语言不是中文时显示的名字',
                        },
                        {
                            label: '导航图标 :',
                            prop: 'icon',
                            slot: true,
                            content:
                                '未选中的导航图标，png格式，建议尺寸为80px * 80px；<br>如果是中间凸起的按钮，建议为120px * 120px的png图片',
                            rules: [
                                { required: true, message: '导航图标不能为空' },
                            ],
                        },
                        {
                            label: '导航选中图标 :',
                            prop: 'active_icon',
                            slot: true,
                            content:
                                '选中的导航图标，png格式，建议尺寸为80px * 80px；<br>如果是中间凸起的按钮，建议为120px * 120px的png图片',
                            rules: [
                                {
                                    required: true,
                                    message: '导航选中图标不能为空',
                                },
                            ],
                        },
                        {
                            label: '排序 :',
                            prop: 'sort',
                            type: 'input',
                            rules: [{ required: true, message: '不能为空' }],
                            bind: {
                                placeholder: '请输入排序',
                            },
                            content:
                                '菜单将以该排序规则从左到右排列，数值越小越靠前，不设置排序将以录入时间倒序排列',
                        },
                        {
                            label: '跳转类型 :',
                            prop: 'jump_type',
                            type: 'radio',
                            rules: [
                                { required: true, message: '导航名称不能为空' },
                            ],
                            options: [
                                {
                                    label: '本小程序',
                                    value: 1,
                                },
                                {
                                    label: '其他小程序',
                                    value: 2,
                                },
                            ],
                        },
                        {
                            label: '跳转地址 :',
                            prop: 'jump_url',
                            type: 'input',
                            rules: [{ validator: jumpUrlValidator }],
                            bind: {
                                placeholder: '请输入跳转地址',
                            },
                            style: {
                                display: 'block',
                            },
                            content:
                                '点击导航后将要跳转的页面路由，该路由必须是小程序已注册过的，否则无效，例：/pages/index/index?id=1',
                        },
                        {
                            label: '其他小程序appid :',
                            prop: 'appid',
                            type: 'input',
                            rules: [{ validator: appidValidator }],
                            bind: {
                                placeholder: '请输入其他小程序appid',
                            },
                            style: {
                                display: 'none',
                            },
                            content:
                                '点击导航后将要跳转的页面路由，该路由必须是小程序已注册过的，否则无效',
                        },
                        {
                            label: '其他小程序页面地址 :',
                            prop: 'mp_page',
                            type: 'input',
                            rules: [{ validator: mpPageValidator }],
                            bind: {
                                placeholder: '请输入其他小程序页面地址',
                            },
                            style: {
                                display: 'none',
                            },
                            content:
                                '点击导航后将要跳转的页面路由，例：/pages/index/index?id=1',
                        },
                        {
                            label: '是否显示 :',
                            prop: 'status',
                            type: 'radio',
                            rules: [
                                {
                                    required: true,
                                    message: '请选择菜单是否显示',
                                },
                            ],
                            options: [
                                {
                                    label: '显示',
                                    value: 1,
                                },
                                {
                                    label: '隐藏',
                                    value: 0,
                                },
                            ],
                        },
                    ],
                    labelWidth: '200px',
                    rowSize: 1, //一行可以展示几列表单，默认为3列
                },
                fdata: {
                    id: 0,
                    tid: '',
                    nav_name: '',
                    icon: '',
                    active_icon: '',
                    sort: 100,
                    jump_type: 1,
                    jump_url: '',
                    appid: '',
                    mp_page: '',
                    status: 1,
                    nav_alias: '',
                },
            };
        },
        created() {},
        mounted() {
            let _this = this;
            if (Object.keys(_formData).length > 0) {
                for (let key in _this.fdata) {
                    _this.fdata[key] = _formData[key];
                }
            }
        },
        methods: {
            changeEvent(e) {
                let _this = this;
                switch (e.jump_type) {
                    case 2:
                        search_obj_key(_this.config.formdesc, 'jump_url').map(
                            (v) => {
                                _this.config.formdesc[v].style.display = 'none';
                            }
                        );
                        search_obj_key(_this.config.formdesc, 'appid').map(
                            (v) => {
                                _this.config.formdesc[v].style.display =
                                    'block';
                            }
                        );
                        search_obj_key(_this.config.formdesc, 'mp_page').map(
                            (v) => {
                                _this.config.formdesc[v].style.display =
                                    'block';
                            }
                        );
                        break;
                    default:
                        search_obj_key(_this.config.formdesc, 'jump_url').map(
                            (v) => {
                                _this.config.formdesc[v].style.display =
                                    'block';
                            }
                        );
                        search_obj_key(_this.config.formdesc, 'appid').map(
                            (v) => {
                                _this.config.formdesc[v].style.display = 'none';
                            }
                        );
                        search_obj_key(_this.config.formdesc, 'mp_page').map(
                            (v) => {
                                _this.config.formdesc[v].style.display = 'none';
                            }
                        );
                        break;
                }
            },
            //表单验证
            getFormPromise(form) {
                return new Promise((resolve) => {
                    form.validate((res) => {
                        resolve(res);
                    });
                });
            },
            store(formName) {
                let _this = this;
                // 获取到组件中的form
                const configForm = this.$refs.ruleForm.$refs.ruleForm;
                // 使用Promise.all去校验结果,可加入多个表单
                Promise.all([configForm].map(this.getFormPromise)).then(
                    (res) => {
                        const validateResult = res.every((item) => !!item);
                        console.log(validateResult);
                        if (validateResult) {
                            _this.loading = true;
                            request({
                                params: {
                                    s: 'tabbar/index/edit',
                                },
                                method: 'post',
                                data: _this.fdata,
                            }).then((e) => {
                                _this.loading = false;
                                if (e.data.code == 0) {
                                    _this.backpage();
                                } else {
                                    _this.$message.error(e.data.msg);
                                }
                            });
                        } else {
                            console.log('表单未校验通过');
                        }
                    }
                );
            },
            backpage() {
                navigateTo({
                    s: 'tabbar/index/index',
                });
            },
            //图片上传完成
            uploadSuccess(file, prop) {
                file = file.response.data.data.file;
                this.fdata[prop] = file;
            },
        },
    });
</script>
